<template>
  <div class="dialog-form">
    <el-form ref="vehicleRef" :model="form" :rules="rules" label-width="110px">
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="所属公司" prop="companyId">
            <el-tree-select
              v-model="form.companyId"
              :data="companyList"
              :render-after-expand="true"
              :props="treeProps"
              node-key="id"
              :default-expanded-keys="expandedKeys"
              @change="handleCompanyChange"
              check-strictly
              :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBusDriver > 0)"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属线路" prop="lineId">
            <el-select :disabled="!form.companyId || (form.id && (form.hasPatrolTask > 0 || form.hasBusDriver > 0))" v-model="form.lineId" placeholder="请选择" clearable>
              <el-option
                v-for="item in lineList"
                :key="item.id"
                :label="item.lineName"
                :value="item.id"
                :disabled="item.status == 2"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="车辆编号" prop="busNo">
            <el-input v-model="form.busNo" placeholder="支持数字、英文" :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBusDriver > 0)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌号" prop="busLicense">
            <el-input v-model="form.busLicense" placeholder="请输入车牌号" :disabled="form.id && (form.hasPatrolTask > 0 || form.hasBusDriver > 0)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="车辆类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" clearable>
              <el-option
                v-for="item in bus_type"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆状态" prop="status">
            <el-switch
              v-model="form.status"
              inline-prompt
              :active-value="1"
              :inactive-value="2"
              inactive-text="禁用"
              active-text="启用"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="36">
        <el-col :span="12">
          <el-form-item label="车载机具厂商" prop="busMachineryCompany">
            <el-select v-model="form.busMachineryCompany" placeholder="请选择" @change="handleMachineryCompanyChange" clearable>
              <el-option
                v-for="item in terminal_company"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="车载机具编号" prop="busMachineryNumber">
            <el-select 
              v-model="form.busMachineryNumber"
              filterable 
              clearable
              placeholder="请选择">
              <el-option
                v-for="item in machineryNumList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="onCancel">取消</el-button>
      <el-button type="primary" @click="onConfirm">确认</el-button>
    </div>
  </div>
</template>

<script setup>
import { getVehicle, addVehicle, updateVehicle, getMachineryNumber } from "@/api/bus/vehicle"
import { listLine } from "@/api/bus/line"

const { proxy } = getCurrentInstance()
const { bus_type,terminal_company } = proxy.useDict("bus_type","terminal_company")

const emits = defineEmits(['cancel', 'confirm'])
const props = defineProps(['companyList'])

const treeProps = {
  label: 'name',
  disabled: (data, node) => {
    return data.state == 2 || data.check == false
  }
}
const lineList = ref([])
const expandedKeys = ref([])
const vehicleRef = ref()
const loading = ref(false)
const machineryNumber = ref([])
const machineryNumList = ref([])
const options = ref([])
const form = ref({
  id: null,
  busNo: null,
  busLicense: null,
  companyName: null,
  type: null,
  busMachineryNumber: null,
  busMachineryCompany: null,
  companyId: null,
  lineId: null,
  status: 1,
  driverNum:0,
  createTime: null,
  updateTime: null
})
const rules = {
  busNo: [
    { required: true, message: "车辆编号不能为空", trigger: "blur" },
    { pattern: /^[A-Za-z0-9]+$/, message: "车辆编号格式不正确", trigger: "blur" }
  ],
  busLicense: [
    { required: true, message: "车牌号不能为空", trigger: "blur" },
    { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/, message: "车牌号格式不正确", trigger: "blur" }
  ],
  type: [
    { required: false, message: "车辆类型不能为空", trigger: "change" }
  ],
  busMachineryNumber: [
    { required: false, message: "机具编号不能为空", trigger: "blur" }
  ],
  companyId: [
    { required: true, message: "所属公司不能为空", trigger: "blur" }
  ],
  lineId: [
    { required: false, message: "所属线路不能为空", trigger: "blur" }
  ],
  status: [
    { required: false, message: "状态不能为空", trigger: "change" }
  ],
  busMachineryCompany: [
    { required: false, message: "机具厂商不能为空", trigger: "blur" }
  ]
}

const pageInit = (id) => {
  if (id) {
    getVehicle(id).then(response => {
      form.value = response.data
      expandedKeys.value = [form.value.companyId]
      getLineList()
      if (form.value.busMachineryCompany) {
        getMachineryNumberList(form.value.busMachineryCompany)
      }
      if (form.value.lineId == 0) {
        form.value.lineId = null
      }
      if (form.value.type == 0) {
        form.value.type = null
      }
    })
  }
}

const handleCompanyChange = () => {
  form.value.lineId = null
  getLineList()
}

/** 查询公交线路列表 */
const getLineList = () => {
  const params = {
    pageNum: 1,
    pageSize: 100,
    companyId: form.value.companyId
  }
  listLine(params).then(response => {
    lineList.value = response.rows
  })
}

const handleMachineryCompanyChange = (val) => {
  form.value.busMachineryNumber = null
  getMachineryNumberList(val)
}

const getMachineryNumberList = (value) => {
  if (!value) return
  getMachineryNumber(value).then(response => {
    machineryNumList.value = response.machineryNumbers.map((item) => {
      return {value: item, label: item}
    })
  })
}

const onCancel = () => {
  emits('cancel')
}

const onConfirm = () => {
  vehicleRef.value.validate(valid => {
    if (valid) {
      if (form.value.id) {
        updateVehicle(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功")
          vehicleRef.value.resetFields()
          emits('confirm')
        })
      } else {
        addVehicle(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功")
          vehicleRef.value.resetFields()
          emits('confirm')
        })
      }
    }
  })
}

defineExpose({
  pageInit
})

</script>

<style lang="scss" scoped>

</style>